<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="user_list">

    <!--消息modal-->
    <div class="modal fade" tabindex="-1" role="dialog" id="messageModal">

    </div>


    <!-- 添加用户Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                </div>
                    <div class="modal-body">
                            <div class="form-group">
                                <label for="realName1">真实姓名</label>
                                <input type="text" class="form-control" id="realName1" placeholder="真实姓名" name="realName">
                            </div>
                            <div class="form-group">
                                <label for="phone1">手机号码</label>
                                <input type="text" class="form-control" id="phone1" placeholder="手机号码" name="phone">
                            </div>
                            <div class="form-group">
                                <label for="password1">密码</label>
                                <input type="password" class="form-control" id="password1" placeholder="密码" name="password">
                            </div>
                            <div class="form-group">
                                <label for="nickname1">昵称</label>
                                <input type="text" class="form-control" id="nickname1" placeholder="手机号码" name="nickname">
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" id="submitUserInfo1">提交</button>
                    </div>

                <script type="text/javascript">
                    $('#submitUserInfo1').click(function () {
                        var realName = $("#realName1").val();
                        var phone = $("#phone1").val();
                        var password = $("#password1").val();
                        var nickname = $("#nickname1").val();
                        console.log(realName + " " + phone + " " + password + " " + nickname)
                        $.ajax({
                            type: "POST",
                            url: "/user/add_user",
                            data: {
                                phone:phone,
                                realName:realName,
                                nickname:nickname,
                                password:password
                            },
                            dataType: "json",
                            success: function(data){
                                $('#myModal').modal('hide');
                                $(".modal-backdrop.fade").hide();
                                console.log(data)
                                $("#messageModal").append(
                                    "<div class='modal-dialog' role='document'>" +
                                    "<div class='modal-content'>" +
                                    "<div class='modal-header'>" +
                                    "<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                                    "<h4 class='modal-title'>消息通知</h4>" +
                                    "</div>" +
                                    "<div class='modal-body'>" +
                                    "<p>" + data.info + "</p>" +
                                    "</div>" +
                                    "<div class='modal-footer'>" +
                                    "<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>" +
                                    "</div>" +
                                    "</div>" +
                                    "</div>"
                                );
                                $('#messageModal').modal();
                            }
                        });
                    })
                </script>
            </div>
        </div>
    </div>



    <!-- 编辑用户Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editModalLabel">编辑用户</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="realName2">真实姓名</label>
                        <input type="text" class="form-control" id="realName2" placeholder="真实姓名" name="realName">
                    </div>
                    <div class="form-group">
                        <label for="phone2">手机号码</label>
                        <input type="text" class="form-control" id="phone2" placeholder="手机号码" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="password2">密码</label>
                        <input type="password" class="form-control" id="password2" placeholder="密码" name="password">
                    </div>
                    <div class="form-group">
                        <label for="nickname2">昵称</label>
                        <input type="text" class="form-control" id="nickname2" placeholder="手机号码" name="nickname">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" id="submitUserInfo2">提交</button>
                </div>
                <script type="text/javascript">
                    $('#submitUserInfo1').click(function () {
                        var realName = $("#realName2").val();
                        var phone = $("#phone2").val();
                        var password = $("#password2").val();
                        var nickname = $("#nickname2").val();
                        console.log(realName + " " + phone + " " + password + " " + nickname)
                        $.ajax({
                            type: "POST",
                            url: "/user/edit_user",
                            data: {
                                phone:phone,
                                realName:realName,
                                nickname:nickname,
                                password:password
                            },
                            dataType: "json",
                            success: function(data){
                                $('#myModal').modal('hide');
                                $(".modal-backdrop.fade").hide();
                                console.log(data)
                                $("#messageModal").append(
                                    "<div class='modal-dialog' role='document'>" +
                                    "<div class='modal-content'>" +
                                    "<div class='modal-header'>" +
                                    "<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                                    "<h4 class='modal-title'>消息通知</h4>" +
                                    "</div>" +
                                    "<div class='modal-body'>" +
                                    "<p>" + data.info + "</p>" +
                                    "</div>" +
                                    "<div class='modal-footer'>" +
                                    "<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>" +
                                    "</div>" +
                                    "</div>" +
                                    "</div>"
                                );
                                $('#messageModal').modal();
                            }
                        });
                    })
                </script>
            </div>
        </div>
    </div>


    <!-- 删除用户Modal -->
    <div class="modal fade" id="deleteModel" tabindex="-1" role="dialog" aria-labelledby="deleteModelLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="deleteModelLabel">删除用户</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <div class="main-content">
           <div class="container-fluid">
               <div class="panel">
                   <div class="panel-heading">
                       <h3 class="panel-title">用户</h3>
                       <div class="right">
                           <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                           <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                       </div>
                   </div>
                   <div class="panel-body no-padding">
                       <!--<div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>-->
                       &nbsp;&nbsp;&nbsp;
                       <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">添加</button>
                       &nbsp;&nbsp;&nbsp;
                       <button type="button" class="btn btn-info" data-toggle="modal" data-target="#editModal">编辑</button>
                       &nbsp;&nbsp;&nbsp;
                       <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModel">删除</button>
                       <table class="table table-striped userTable" id="data_table">
                           <thead>
                               <tr>
                                   <th>用户姓名</th>
                                   <th>用户手机</th>
                                   <th>用户昵称</th>
                               </tr>
                           </thead>
                           <tbody>
                               <tr th:each="user:${userList}">
                                   <td th:text="${user.realName}"></td>
                                   <td th:text="${user.phone}"></td>
                                   <td th:text="${user.nickname}"></td>
                               </tr>
                           </tbody>
                       </table>
                       <nav aria-label="Page navigation" style="margin-left: 80%;margin-top: -20px;">
                           <ul class="pagination userPage">
                               <li>
                                   <a href="#" aria-label="Previous">
                                       <span aria-hidden="true">&laquo;</span>
                                   </a>
                               </li>
                               <li class="active"><a href="#">1</a></li>
                               <li><a href="#">2</a></li>
                               <li><a href="#">3</a></li>
                               <li><a href="#">4</a></li>
                               <li><a href="#">5</a></li>
                               <li>
                                   <a href="#" aria-label="Next">
                                       <span aria-hidden="true">&raquo;</span>
                                   </a>
                               </li>
                           </ul>
                       </nav>
                   </div>

                   <script type="text/javascript">
                       var html = "";
                       $(".userPage li").on("click",function () {
                           $(this).addClass("active");
                           $(this).siblings('li').removeClass('active');
                           var num = $(this).text();
                           $.ajax({
                               type: "GET",
                               url: "/admin/page_list",
                               data: {
                                   type:"user_list",
                                   pageNum:num
                               },
                               dataType: "json",
                               success: function(data){
                                   console.log(data);
                                   html += "<tr>" +
                                       "<th>用户姓名</th>" +
                                       "<th>用户手机</th>" +
                                       "<th>用户昵称</th>" +
                                       "</tr>"
                                   for(var i = 0; i < data.length; i++){
                                       html += "<tr>" +
                                           "<td>" + data[i].nickname+ "</td>" +
                                           "<td>" + data[i].phone+ "</td>" +
                                           "<td>" + data[i].nickname+ "</td>" +
                                           + "</tr>"
                                   }
                                   $(".userTable").html(html);
                                   html = "";
                               }
                           });
                       })
                   </script>
                    <!--显示分页信息
                   <div class="row">
                       分页文字信息
                       <div class="col-md-6" id="page_info_area"></div>
                       分页条信息
                       <div class="col-md-6" id="page_nav_area">

                       </div>
                   </div>-->



                   <div class="panel-footer" style="margin-top: -1%">
                       <div class="row">
                           <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> Last 24 hours</span></div>
                           <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>
                       </div>
                   </div>



                </div>

               <div class="panel">
                   <div class="panel-heading">
                       <h3 class="panel-title">联系人</h3>
                       <div class="right">
                           <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                           <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                       </div>
                   </div>
                   <div class="panel-body no-padding">
                       <!--<div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>-->
                       <!--&nbsp;&nbsp;&nbsp;
                       <button type="button" class="btn btn-default">添加</button>
                       &nbsp;&nbsp;&nbsp;
                       <button type="button" class="btn btn-info">编辑</button>
                       &nbsp;&nbsp;&nbsp;
                       <button type="button" class="btn btn-danger">删除</button>-->
                       <table class="table table-striped contactTable" >
                           <thead>
                           <tr>
                               <th>联系人姓名</th>
                               <th>联系人手机</th>
                               <th>联系人启用</th>
                               <th>联系人状态</th>
                           </tr>
                           </thead>
                           <tbody>
                           <tr th:each="contact:${contactList}">
                               <td th:text="${contact.contactName}"></td>
                               <td th:text="${contact.contactPhone}"></td>
                               <td><span th:classappend="${contact.isDisable} == 1?'glyphicon glyphicon-ok':'glyphicon glyphicon-remove'"></span></td>
                               <td><span th:classappend="${contact.status} == 1?'glyphicon glyphicon-ok':'glyphicon glyphicon-remove'"></span></td>
                           </tr>
                           </tbody>
                       </table>
                       <nav aria-label="Page navigation" style="margin-left: 80%;margin-top: -20px;">
                           <ul class="pagination contactPage">
                               <li>
                                   <a href="#" aria-label="Previous">
                                       <span aria-hidden="true">&laquo;</span>
                                   </a>
                               </li>
                               <li class="active"><a href="#">1</a></li>
                               <li><a href="#">2</a></li>
                               <li><a href="#">3</a></li>
                               <li><a href="#">4</a></li>
                               <li><a href="#">5</a></li>
                               <li>
                                   <a href="#" aria-label="Next">
                                       <span aria-hidden="true">&raquo;</span>
                                   </a>
                               </li>
                           </ul>
                       </nav>
                   </div>

                   <script type="text/javascript">
                       var html = "";
                       $(".contactPage li").on("click",function () {
                           $(this).addClass("active");
                           $(this).siblings('li').removeClass('active');
                           var num = $(this).text();
                           $.ajax({
                               type: "GET",
                               url: "/admin/page_list",
                               data: {
                                   type:"contact_list",
                                   pageNum:num
                               },
                               dataType: "json",
                               success: function(data){
                                   console.log(data);
                                   html += "<tr>" +
                                       "<th>联系人姓名</th>" +
                                       "<th>联系人手机</th>" +
                                       "<th>联系人启用</th>" +
                                       "<th>联系人状态</th>" +
                                       "</tr>"
                                   for(var i = 0; i < data.length; i++){
                                       if(data[i].contact.isDisable == 1){
                                           data[i].contact.isDisable = "glyphicon glyphicon-ok";
                                       }else {
                                           data[i].contact.isDisable = "glyphicon glyphicon-remove";
                                       }

                                       if(data[i].contact.status == 1){
                                           data[i].contact.status = "glyphicon glyphicon-ok";
                                       }else {
                                           data[i].contact.status = "glyphicon glyphicon-remove";
                                       }
                                       html += "<tr>" +
                                           "<td>" + data[i].contactname + "</td>" +
                                           "<td>" + data[i].contactPhone + "</td>" +
                                           "<td class=" + data[i].isDisable +"></td>" +
                                           "<td class=" + data[i].status +"></td>" +
                                           + "</tr>"
                                   }
                                   $(".contactTable").html(html);
                                   html = "";
                               }
                           });
                       })
                   </script>

                   <!--显示分页信息
                  <div class="row">
                      分页文字信息
                      <div class="col-md-6" id="page_info_area"></div>
                      分页条信息
                      <div class="col-md-6" id="page_nav_area">

                      </div>
                  </div>-->



                   <div class="panel-footer" style="margin-top: -1%">
                       <div class="row">
                           <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> Last 24 hours</span></div>
                           <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>
                       </div>
                   </div>



               </div>
           </div>
    </div>
</div>
<div th:fragment="danger_list">
    <div class="main-content">
        <div class="container-fluid">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">危险人员</h3>
                    <div class="right">
                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                    </div>
                </div>
                <div class="panel-body no-padding">
                    <!--<div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>-->
                    <!--&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default">添加</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-info">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger">删除</button>-->
                    <table class="table table-striped" >
                        <thead>
                        <tr>
                            <th>危险人员姓名</th>
                            <th>危险人员手机</th>
                            <th>危险人员昵称</th>
                            <th>危险人员纬度</th>
                            <th>危险人员经度</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="danger:${dangerList}">
                            <td th:text="${danger.real_name}"></td>
                            <td th:text="${danger.phone}"></td>
                            <td th:text="${danger.nickname}"></td>
                            <td th:text="${danger.lng}"></td>
                            <td th:text="${danger.lat}"></td>
                        </tr>
                        </tbody>
                    </table>


                    <nav aria-label="Page navigation" style="margin-left: 80%;margin-top: -20px;">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <script type="text/javascript">
                    var html = "";
                    $(".pagination li").on("click",function () {
                        $(this).addClass("active");
                        $(this).siblings('li').removeClass('active');
                        var num = $(this).text();
                        $.ajax({
                            type: "GET",
                            url: "/admin/page_list",
                            data: {
                                type:"danger_list",
                                pageNum:num
                            },
                            dataType: "json",
                            success: function(data){
                                console.log(data);
                                html += "<tr>" +
                                    "<th>危险人员姓名</th>" +
                                    "<th>危险人员手机</th>" +
                                    "<th>危险人员昵称</th>" +
                                    "<th>危险人员纬度</th>" +
                                    "<th>危险人员经度</th>" +
                                    "</tr>"
                                for(var i = 0; i < data.length; i++){
                                    html += "<tr>" +
                                        "<td>" + data[i].real_name+ "</td>" +
                                        "<td>" + data[i].phone+ "</td>" +
                                        "<td>" + data[i].nickname+ "</td>" +
                                        "<td>" + data[i].lng+ "</td>" +
                                        "<td>" + data[i].lat+ "</td>" +
                                        + "</tr>"
                                }
                                $(".table-striped").html(html);
                                html = "";
                            }
                        });
                    })
                </script>

                <!--显示分页信息
               <div class="row">
                   分页文字信息
                   <div class="col-md-6" id="page_info_area"></div>
                   分页条信息
                   <div class="col-md-6" id="page_nav_area">

                   </div>
               </div>-->



                <div class="panel-footer" style="margin-top: -1%">
                    <div class="row">
                        <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> Last 24 hours</span></div>
                        <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>
                    </div>
                </div>



            </div>
        </div>
    </div>
</div>
<div th:fragment="no_save_list">
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1modal" role="dialog" aria-labelledby="myModalLabel" style="position: relative">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 1202px;height: 710px;margin-left: -55%" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">地图显示</h4>
                    <h6 class="modal-title" id="modalAddress"></h6>
                </div>
                <div class="modal-body panel panel-default" style="width: 200px;height: 400px;float: left">
                    <div class="panel-heading" style="height: 10%;margin-top: -8%;margin-left: -8%;margin-right: -8%;text-align: center">紧急联系人列表</div>
                    <div class="panel-body" id="contact" style="padding: 0px;margin-top: 10%">
                        <!--紧急联系人列表-->
                    </div>
                </div>
                <div class="modal-body" id="allmap" style="width: 700px;height: 400px;float: left">
                    <script type="text/javascript">
                        var loadCount = 1;
                        var str = "";
                        var html_contact = "";
                        var html_person_info = "";
                        var html_police_info = "";
                        function map(lng,lat,name) {
                            var map = new BMap.Map("allmap");    // 创建Map实例
                            var point = new BMap.Point(lng, lat);
                            map.centerAndZoom(point, 17);  // 初始化地图,设置中心点坐标和地图级别
                            //在地图上定位到某点
                            map.clearOverlays();
                            //添加地图类型控件
                            map.addControl(new BMap.MapTypeControl({
                                mapTypes:[
                                    BMAP_NORMAL_MAP,
                                    BMAP_HYBRID_MAP
                                ]}));
                            var marker = new BMap.Marker(point);  // 创建标注
                            map.clearOverlays();
                            map.addOverlay(marker);               // 将标注添加到地图中


                            var geoc = new BMap.Geocoder();
                            var pt = point;
                            $("#modalAddress").empty();
                            str = "无法显示坐标信息";
                            geoc.getLocation(pt, function(rs){
                                var addComp = rs.addressComponents;
                                // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                                if(addComp.province != ""){
                                    str = addComp.province
                                }
                                if(addComp.city != ""){
                                    str += "," + addComp.city
                                }
                                if(addComp.district != ""){
                                    str += "," + addComp.district
                                }
                                if(addComp.street != ""){
                                    str += "," + addComp.street
                                }
                                if(addComp.streetNumber != ""){
                                    str += "," + addComp.streetNumber
                                }
                                $("#modalAddress").html(str);
                            });

                            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                            map.addEventListener("tilesloaded",function(){
                               /* if(loadCount == 1){
                                    map.setCenter(point);
                                    console.log(loadCount)
                                }
                                loadCount = loadCount + 1;*/
                                map.setCenter(point);
                            });

                            /*紧急联系人列表*/
                            $.ajax({
                                type: "GET",
                                url: "/user/contactInfo",
                                data: {
                                    username:name
                                },
                                dataType: "json",
                                success: function(data){
                                    for(var i = 0; i < data.data.length; i++){
                                        html_contact +="<label class='col-sm-12 control-label'><span>紧急联系人姓名:</span><br>" + data.data[i].contactName + "</label>"
                                                + "<label class='col-sm-12 control-label'><span>紧急联系人号码:</span><br>" + data.data[i].contactPhone + "</label>"
                                    }
                                    $("#contact").html(html_contact);
                                    html_contact = "";
                                }
                            });

                            /*个人信息列表*/
                            $.ajax({
                                type: "GET",
                                url: "/user/userInfo",
                                data: {
                                    username:name
                                },
                                dataType: "json",
                                success: function(data){
                                    for(var i = 0; i < data.data.length; i++){
                                        console.log(data)
                                        if(data.data[0].sex == "0"){
                                            data.data[0].sex = "女"
                                        }else {
                                            data.data[0].sex = "男"
                                        }
                                        html_person_info +="<label class='col-sm-12 control-label'><span>用户姓名:</span>" + data.data[0].real_name +"</label><br>" +
                                            "<label class='col-sm-12 control-label'><span>用户号码:</span>" + data.data[0].phone + "</label><br>" +
                                            "<label class='col-sm-12 control-label'><span>用户年龄:</span>" + data.data[0].age + "</label><br>" +
                                            "<label class='col-sm-12 control-label'><span>用户性别:</span>" + data.data[0].sex + "</label><br>" +
                                            "<label class='col-sm-12 control-label'><span>用户身高:</span>" + data.data[0].height + "</label><br>" +
                                            "<label class='col-sm-12 control-label'><span>用户血型:</span>" + data.data[0].blood + "</label><br>" +
                                            "<label class='col-sm-12 control-label'><span>用户既往病史:</span>" + data.data[0].illness + "</label><br>"
                                    }
                                    $("#personInfo").html(html_person_info);
                                    html_person_info = "";
                                }
                            });

                            /*附近警察局*/
                            $.ajax({
                                type: "GET",
                                url: "http://api.map.baidu.com/place/v2/search",
                                data:{
                                    query:"警察局",
                                    location:lat+","+lng,
                                    radius:5000,
                                    output:"json",
                                    ak:"ezxPAcwzT3GpYHBsCNaxMGR1dQAL0Q6U"

                                },
                                dataType:"jsonp",  //数据格式设置为jsonp
                                jsonp:"callback",  //Jquery生成验证参数的名称
                                success: function(data){
                                    for(var i = 0; i < 3; i++){
                                        if(data.results[i].telephone == undefined){
                                            data.results[i].telephone = "无";
                                        }
                                        html_police_info += "<div style='float:left;width:30%;'>" +
                                            "<label class='col-sm-12 control-label'><span>警察局地址:</span>" + data.results[i].address +"</label>" +
                                           /* "<label class='col-sm-12 control-label'><span>警察局经度:</span>" + data.results[i].location.lat + "</label>" +
                                            "<label class='col-sm-12 control-label'><span>警察局纬度:</span>" + data.results[i].location.lng + "</label>" +*/
                                            "<label class='col-sm-12 control-label'><span>警察局名称:</span>" + data.results[i].name + "</label>" +
                                            "<label class='col-sm-12 control-label'><span>警察局电话:</span>" + data.results[i].telephone + "</label>"
                                            + "</div>"
                                    }
                                    $("#policeInfo").html(html_police_info);
                                    html_police_info = "";
                                }
                            });

                        }
                    </script>
                </div>

                <div class="modal-body panel panel-default"  style="margin-left: 75%;width: 300px;height: 400px;">
                        <div class="panel-heading" style="height: 10%;margin-top: -5%;margin-left: -5.5%;margin-right: -5%;text-align: center">个人信息</div>
                        <div class="panel-body" id="personInfo">
                            <!--个人信息-->
                        </div>
                </div>


                <div class="modal-body"  style="width: 100%;height: 310px;">
                    <div class="panel-body" id="policeInfo">
                        <!--警察局信息-->
                    </div>
                </div>


                <div class="modal-footer" style="position: absolute;right: 0px;bottom: 0px;border-top: 1px solid #e5e5e5;width: 100%;">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                </div>



            </div>
        </div>
    </div>


    <div class="main-content">
        <div class="container-fluid">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">无人救助人员</h3>
                    <div class="right">
                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                    </div>
                </div>
                <div class="panel-body no-padding">
                    <!--<div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>-->
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>无人救助人员姓名</th>
                            <th>无人救助人员手机</th>
                            <th>无人救助人员昵称</th>
                            <th>无人救助人员纬度</th>
                            <th>无人救助人员经度</th>
                            <th>查看地图</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="noSave:${noSaveList}">
                            <td th:text="${noSave.real_name}"></td>
                            <td th:text="${noSave.phone}"></td>
                            <td th:text="${noSave.nickname}"></td>
                            <td th:text="${noSave.lng}"></td>
                            <td th:text="${noSave.lat}"></td>
                            <!-- Button trigger modal -->
                            <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" id="mapbtn" th:onclick="|map('${noSave.lng}','${noSave.lat}','${noSave.real_name}')|">查看地图</button></td>
                            <!--th:onclick="|map('${noSave.lng}','${noSave.lat}')|"-->
                        </tr>
                        </tbody>
                    </table>


                    <nav aria-label="Page navigation" style="margin-left: 80%;margin-top: -20px;">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <script type="text/javascript">
                    var html = "";
                    $(".pagination li").on("click",function () {
                        $(this).addClass("active");
                        $(this).siblings('li').removeClass('active');
                        var num = $(this).text();
                        $.ajax({
                            type: "GET",
                            url: "/admin/page_list",
                            data: {
                                type:"no_save_list",
                                pageNum:num
                            },
                            dataType: "json",
                            success: function(data){
                                console.log(data);
                                html += "<tr>" +
                                    "<th>无人救助人员姓名</th>" +
                                    "<th>无人救助人员手机</th>" +
                                    "<th>无人救助人员昵称</th>" +
                                    "<th>无人救助人员经度</th>" +
                                    "<th>无人救助人员纬度</th>" +
                                    "<th>查看地图</th>" +
                                    "</tr>"
                                for(var i = 0; i < data.length; i++){
                                    html += "<tr>" +
                                        "<td>" + data[i].real_name+ "</td>" +
                                        "<td>" + data[i].phone+ "</td>" +
                                        "<td>" + data[i].nickname+ "</td>" +
                                        "<td>" + data[i].lng+ "</td>" +
                                        "<td>" + data[i].lat+ "</td>" +
                                        "<td><button type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal' id='mapbtn' th:onclick=" + "|map(" + data[i].lng + "," + data[i].lat + "," + data[i].real_name + ")|>查看地图</button></td>"
                                        + "</tr>"
                                }
                                $(".table-striped").html(html);
                                html = "";
                            }
                        });
                    })
                </script>

                <!--显示分页信息
               <div class="row">
                   分页文字信息
                   <div class="col-md-6" id="page_info_area"></div>
                   分页条信息
                   <div class="col-md-6" id="page_nav_area">

                   </div>
               </div>-->




                <div class="panel-footer" style="margin-top: -1%">
                    <div class="row">
                        <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> Last 24 hours</span></div>
                        <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>
                    </div>
                </div>



            </div>
        </div>
    </div>
</div>
<div th:fragment="device_list">
    <div class="main-content">
        <div class="container-fluid">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">设备列表</h3>
                    <div class="right">
                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                    </div>
                </div>
                <div class="panel-body no-padding">
                    <!--<div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>-->
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default">添加</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-info">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger">删除</button>
                    <table class="table table-striped" >
                        <thead>
                        <tr>
                            <th>设备号</th>
                            <th>用户姓名</th>
                            <th>用户手机</th>
                            <th>用户昵称</th>
                            <th>设备绑定时间</th>
                            <th>设备最近打开时间</th>
                            <th>设备激活</th>
                            <th>设备状态</th>
                            <th>设备绑定</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="dev:${devList}">
                            <td th:text="${dev.device_number}"></td>
                            <td th:text="${dev.real_name}"></td>
                            <td th:text="${dev.phone}"></td>
                            <td th:text="${dev.nickname}"></td>
                            <td th:text="${dev.active_time}"></td>
                            <td th:text="${dev.last_open}"></td>
                            <td><span  th:classappend="${dev.is_disable} == 1?'glyphicon glyphicon-ok':'glyphicon glyphicon-remove'"></span></td>
                            <td><span  th:classappend="${dev.status} == 1?'glyphicon glyphicon-ok':'glyphicon glyphicon-remove'"></span></td>
                            <td><span  th:classappend="${dev.is_bind} == 1?'glyphicon glyphicon-ok':'glyphicon glyphicon-remove'"></span></td>
                        </tr>
                        </tbody>
                    </table>


                    <nav aria-label="Page navigation" style="margin-left: 80%;margin-top: -20px;">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <!--显示分页信息
               <div class="row">
                   分页文字信息
                   <div class="col-md-6" id="page_info_area"></div>
                   分页条信息
                   <div class="col-md-6" id="page_nav_area">

                   </div>
               </div>-->



                <div class="panel-footer" style="margin-top: -1%">
                    <div class="row">
                        <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> Last 24 hours</span></div>
                        <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>
                    </div>
                </div>



            </div>
        </div>
    </div>
</div>
<div th:fragment="unusual_list">
    <div class="main-content">
        <div class="container-fluid">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">异常列表</h3>
                    <div class="right">
                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                    </div>
                </div>
                <div class="panel-body no-padding">
                    <!--<div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>-->
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default">添加</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-info">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger">删除</button>
                    <table class="table table-striped" >
                        <thead>
                        <tr>
                            <th>用户姓名</th>
                            <th>用户手机</th>
                            <th>用户昵称</th>
                            <th>异常时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="un:${unList}">
                            <td th:text="${un.real_name}"></td>
                            <td th:text="${un.phone}"></td>
                            <td th:text="${un.nickname}"></td>
                            <td th:text="${un.unusual_time}"></td>
                        </tr>
                        </tbody>
                    </table>


                    <nav aria-label="Page navigation" style="margin-left: 80%;margin-top: -20px;">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <!--显示分页信息
               <div class="row">
                   分页文字信息
                   <div class="col-md-6" id="page_info_area"></div>
                   分页条信息
                   <div class="col-md-6" id="page_nav_area">

                   </div>
               </div>-->



                <div class="panel-footer" style="margin-top: -1%">
                    <div class="row">
                        <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> Last 24 hours</span></div>
                        <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>
                    </div>
                </div>



            </div>
        </div>
    </div>
</div>
<div th:fragment="chart_menu">
    <div class="panel panel-headline">
        <div class="panel-body">

            <div class="row">
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">浙江省各地当月报警数报图</h3>
                        </div>
                        <div class="panel-body">
                            <div id="demo-line-chart" class="ct-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">使用APP年龄报图</h3>
                        </div>
                        <div class="panel-body">
                            <div id="age-chart" class="ct-chart" style="height: 305px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">使用APP男女比例报图</h3>
                        </div>
                        <div class="panel-body">
                            <div id="demo-sex-chart" class="ct-chart" style="height: 305px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">时间段报警报图</h3>
                        </div>
                        <div class="panel-body">
                            <div id="demo-bar-chart" class="ct-chart"></div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common.js"></script>
    <script type="text/javascript">
        $(function() {
            var options;

            var data_line = {
                labels: ['杭州', '宁波', '温州', '绍兴', '湖州', '衢州', '丽水', '嘉兴', '金华', '舟山', '台州'],
                series: [
                    [503, 520, 630, 480, 450, 590, 480, 450, 555, 470, 653],
                ]
            };

            // line chart
            options = {
                height: "300px",
                showPoint: true,
                axisX: {
                    showGrid: false
                },
                lineSmooth: false,
            };

            new Chartist.Line('#demo-line-chart', data_line, options);


            var data_bar = {
                labels: ['24:00-3:00', '3:00-6:00', '6:00-9:00', '9:00-12:00', '12:00-15:00', '15:00-18:00', '18:00-21:00', '21:00-24:00'],
                series: [
                    [120, 130, 30, 12, 15, 22, 84, 105],
                ]
            };

            // bar chart
            options = {
                height: "300px",
                axisX: {
                    showGrid: false
                },
            };


            new Chartist.Bar('#demo-bar-chart', data_bar, options);


            /*var data_area = {
                labels: ['24:00-3:00', '3:00-6:00', '6:00-9:00', '9:00-12:00', '12:00-15:00', '15:00-18:00', '18:00-21:00', '21:00-24:00'],
                series: [
                    [120, 130, 30, 12, 15, 22, 84, 105],
                ]
            };

            // area chart
            options = {
                height: "270px",
                showArea: true,
                showLine: false,
                showPoint: false,
                axisX: {
                    showGrid: false
                },
                lineSmooth: false,
            };

            new Chartist.Line('#demo-area-chart', data, options);*/

            /*****************************************************/
            var myChart = echarts.init(document.getElementById('demo-sex-chart'));
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['男','女']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '65%',
                        center: ['50%', '60%'],
                        data:[
                            {value:90, name:'男'},
                            {value:650, name:'女'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            /*****************************************************/



            // age chart
            var myChart = echarts.init(document.getElementById('age-chart'));
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['15岁及以下','16-25岁','26-35岁','36-50岁','50岁及以上']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '65%',
                        center: ['50%', '60%'],
                        data:[
                            {value:330, name:'15岁及以下'},
                            {value:500, name:'16-25岁'},
                            {value:180, name:'26-35岁'},
                            {value:150, name:'36-50岁'},
                            {value:60, name:'50岁及以上'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        });
    </script>
</div>
<div th:fragment="shop_list">
    <div class="main-content">
        <div class="container-fluid">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">商品列表</h3>
                    <div class="right">
                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                    </div>
                </div>
                <div class="panel-body no-padding">
                    <!--<div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>-->
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default">添加</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-info">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger">删除</button>
                    <table class="table table-striped" >
                        <thead>
                        <tr>
                            <th></th>
                            <th>商品照片</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>商品介绍</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="pro:${productList}">
                            <td>
                                <input type="checkbox" th:value="${pro.id}"/>
                            </td>
                            <td>
                                <img th:src="${pro.productImg}"/>
                            </td>
                            <td th:text="${pro.productName}"></td>
                            <td th:text="${pro.productPrice}"></td>
                            <td th:text="${pro.productAmount}"></td>
                            <td th:text="${pro.productTitle}"></td>
                        </tr>
                        </tbody>
                    </table>


                    <!--<nav aria-label="Page navigation" style="margin-left: 80%;margin-top: -20px;">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>-->
                </div>

                <!--显示分页信息
               <div class="row">
                   分页文字信息
                   <div class="col-md-6" id="page_info_area"></div>
                   分页条信息
                   <div class="col-md-6" id="page_nav_area">

                   </div>
               </div>-->



                <div class="panel-footer" style="margin-top: -1%">
                    <div class="row">
                        <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> Last 24 hours</span></div>
                        <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>
                    </div>
                </div>



            </div>
        </div>
    </div>
</div>
</body>
</html>